@charset "utf-8";
.box1,.box2,.box3{
    width: 500px;
    height: 500px;
    background-color: #E3DC9B;
}
.box.div,.box2.div,.box3.div {
    width: 5px;
}

.box1 .item1 {
    width: 300px;
    height: 100px;
    background-color: #F50408;
}
.box1 .item2 {
    width: 300px;
    height: 100px;
    background-color: #0FED44;
}
.box1 .item3 {
    height: 100px;
    width: 300px;
    background-color: #0F59DB;
}
.box2 .item1 {
    width: 300px;
    background-color: #F30A0E;
    margin-left: auto;
    margin-right: auto;
    height: 100px;
}
.box2 .item2 {
    height: 100px;
    width: 300px;
    background-color: #24F513;
    margin-left: auto;
    margin-right: auto;
}
.box2 .item3 {
    height: 100px;
    width: 300px;
    background-color: #002CFF;
    margin-left: auto;
    margin-right: auto;
}
.box3 .item1 {
    background-color: #F40101;
    width: 33.333%;
    height: 100px;
    float: left;
}
.box3 .item2 {
    background-color: #02F300;
    width: 33.333%;
    height: 100px;
    float: left;
}
.box3 .item3 {
    background-color: #090EEB;
    width: 33.333%;
    height: 100px;
    float: left;
}
.box4 .item1 {
    background-color: #F90004;
    height: 100px;
    width: 33.333%;
    margin-left: 0px;
    margin-right: 0px;
    float: left;
}
.box4 .item2 {
    background-color: #0AE415;
    height: 100px;
    width: 33.333%;
    margin-left: 0px;
    margin-right: 0px;
    float: left;
}
.box4 .item3 {
    background-color: #1347ED;
    height: 100px;
    width: 33.333%;
    margin-left: 0px;
    margin-right: 0px;
    float: left;
}
.box4 div {
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    float: none;
}
.box4 {
    margin-left: 0px;
    height: 500px;
    width: 500px;
    background-color: #FF888A;
}











@media screen{
}
